<template>
    <div class="myInfo">
        <van-nav-bar title="个人信息" left-text="返回" right-text="保存" @click-right="onClickRight" left-arrow
            @click-left="handleBack" />
        <div class="infos">
            <div class="img" @click="handleFile">
                <input type="file" ref="fileRef" hidden @change="handleFileChange" />
                <img :src="imageUrl" alt="">
                <van-icon name="photograph" />
            </div>
            <div class="details">
                <div class="item" @click="handleDialog('0')">
                    <div class="text">昵称</div>
                    <div class="val">{{ info.name }}</div>
                </div>
                <div class="item" @click="handleDialog('1')">
                    <div class="text">手机号</div>
                    <div class="val">{{ info.phone }}</div>
                </div>
                <div class="item" @click="handleDialog('2')">
                    <div class="text">简介</div>
                    <div class="val">{{ info.desc }}</div>
                </div>
                <div class="item" @click="handleDialog('3')">
                    <div class="text">生日</div>
                    <div class="val">{{ info.birthday }}</div>
                </div>
            </div>
        </div>
        <van-popup :close-on-click-overlay="false" closeable v-model="show" position="bottom"
            :style="{ height: '30%' }">

            <van-cell-group v-if="flag == '0'">
                <van-field v-model="info.name" label="昵称" placeholder="请输入昵称" />
            </van-cell-group>

            <van-cell-group v-if="flag == '1'">
                <van-field v-model="info.phone" type="tel" label="手机号" />

            </van-cell-group>
            <van-cell-group v-if="flag == '2'">
                <van-field v-model="info.desc" label="简介" placeholder="请输入简介 " />
            </van-cell-group>
            <van-cell-group v-if="flag == '3'">
                <van-datetime-picker v-model="info.birthday" type="date" title="选择年月日" :formatter="formatter" />
            </van-cell-group>

        </van-popup>
    </div>
</template>

<script>
import axios from 'axios';
import { getUserInfo, updateUserInfo } from "@/api/reception"
import { Toast } from 'vant';
export default {
    name: '前端Index',

    data() {
        return {
            flag: '0',
            show: false,
            info: {
                name: '张三',
                phone: '13800000000',
                desc: '我是一个前端',
                birthday: '2019-08-05'
            },
            imageUrl: '',
            assetUrl: ''
        }
    },
    async created() {
        const res = await getUserInfo()
        console.log(res, 'rrr');
        if (res.code == 200) {
            this.info.name = res.data.nickname
            this.info.phone = res.data.phone
            this.info.desc = res.data.personalProfile
            this.info.birthday = res.data.birth
            this.assetUrl = process.env.VUE_APP_ASSETSURL
            this.imageUrl = this.assetUrl + res.data.avatar
            // this.imgId = this.assetUrl + res.data.avatar
        }
    },
    methods: {
        async onClickRight() {
            console.log(this.info);
            let data = {
                nickname: this.info.name,
                phone: this.info.phone,
                personalProfile: this.info.desc,
                birth: this.info.birthday,
                avatar: this.imgId ? this.imgId : ''

            }
            if (!data.avatar) {
                delete data.avatar
            }
            const res = await updateUserInfo(data)
            console.log(res, 'rrrs');
            if (res.code == 200) {
                Toast('修改成功！')
                const res = await getUserInfo()
                console.log(res, 'rrr');
                if (res.code == 200) {
                    this.info.name = res.data.nickname
                    this.info.phone = res.data.phone
                    this.info.desc = res.data.personalProfile
                    this.info.birthday = res.data.birth
                    this.assetUrl = process.env.VUE_APP_ASSETSURL
                    this.imageUrl = this.assetUrl + res.data.avatar
                    // this.imgId = this.assetUrl + res.data.avatar
                }
            }

        },
        handleBack() {
            this.$router.back()
        },
        handleDialog(flag) {
            this.flag = flag
            this.show = true

        },
        formatter(type, val) {
            if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            }
            return val;
        },
        handleFile() {
            this.$refs.fileRef.click()
        },
        async handleFileChange(v) {
            const form = new FormData();
            form.append('file', v.target.files[0])
            let token = localStorage.getItem('Ctoken')?.replaceAll('"', '')
            let action = process.env.VUE_APP_BASE_API + '/file/upload'
            axios(action, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    Authorization: `${token}`
                },
                data: form,
                method: 'post',

            }).then(res => {
                console.log(res);
                if (res.status == 200) {
                    if (v.target.files[0]) {
                        const reader = new FileReader();  // 创建FileReader实例
                        reader.onload = e => {
                            this.imageUrl = e.target.result;  // 将图片URL存储在imageUrl中
                            console.log(this.imageUrl, 'kk');

                        };
                        reader.readAsDataURL(v.target.files[0]);  // 读取文件并生成DataURL
                    }
                    console.log(res, 'rrr');
                    this.imgId = res.data.data.id
                    this.$toast('上传成功')
                }
            }).catch(err => {
                console.log(err);
            })
        }
    }
}



</script>

<style scoped lang="less">
.myInfo {
    height: 100%;
    background-color: #f5f6f8;

    .infos {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 20px;

        .img {
            position: relative;

            img {
                margin: 20px 0;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                // background-color: red;
                border: 1px solid #e8e9eb;
            }

            i {
                font-size: 16px;
                padding: 5px;
                position: absolute;
                color: #fff;
                background-color: #878789;
                border-radius: 50%;
                bottom: 23px;
                right: -7px;
            }
        }


        .details {
            width: 100%;
            border-radius: 15px;

            .item {
                display: flex;
                font-size: 22px;
                justify-content: space-between;
                padding: 10px;
                height: 50px;
                background-color: #fff;

                &:first-child {
                    border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                }

                &:last-child {
                    border-bottom-left-radius: 15px;
                    border-bottom-right-radius: 15px;
                }
            }
        }
    }
}
</style>